<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getScialListApi, getSocialTopAPI } from '@/api/search/index'
import { HttpCodeEnum } from '@packages/share/enums'
import { useSearchPage, type OptionsItem } from '@/hooks/web'
import { Search } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import { useSearch } from '@/hooks/component'
import SearchCard from './components/listCard.vue'
import MapChart from './components/mapChart.vue'
import ListCard from '@/components/common/listCard.vue'
import operateDrawer from '../components/grammar/index.vue'
import TipsSearchInput from '../components/TipsSearchInput.vue'

const activeNames = ref(['1'])
const operateRef = ref()
const route = useRoute()
const search: any = ref('')
const keyword: any = ref(route.query.keyword)
const active:any = ref(route.query.active)
const { table, page, ruleForm, getRecords } = useSearchPage(getScialListApi, keyword.value)
const { handleSearch } = useSearch('advancedRef', ruleForm, getRecords)
const country = ref([])

//搜索
const handSearch = () => {
  ruleForm.search = search.value.keyword
  handleSearch('search')
}
// 国家列表
const getCountTop = () => {
  getSocialTopAPI().then((res: AxiosResponse) => {
    const { code, rows } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      country.value = rows
    }
  })
}
// 国家列表点击
const Click = (key: string, value: string) => {
  console.log(key, value);
  SearchStrUpdate(key, value)
  handSearch()
}
// 地图:国家选择
const selectMap = (country: any) => {
  SearchStrUpdate('country', country)
  // 相关搜索列表
  handSearch()
}
// 地图:取消国家选择
const cancelMap = (country: any) => {
  let InRegex = new RegExp(`country : "${country}"`);
  if (InRegex.test(search.value.keyword)) {
    const StartRegex = new RegExp(`^country : "${country}"`)
    // 位于开头
    if (StartRegex.test(search.value.keyword)) {
      search.value.keyword = search.value.keyword.replace(InRegex, ``);
    } else {
      const endRegex = new RegExp(`&& country : "${country}"`);
      search.value.keyword = search.value.keyword.replace(endRegex, ``);
    }
  }
  handSearch()
  console.log("地图取消");
}
// 搜索词条拼接
const SearchStrUpdate = (title: string, key: string) => {
  if (!search.value.keyword) {
    search.value.keyword = `${title} : "${key}"`
  }
  else {
    if (search.value.keyword.includes(title)) {
      let regex = new RegExp(`${title} : "([^"]+)"`);
      if (regex.test(search.value.keyword)) {
        search.value.keyword = search.value.keyword.replace(regex, `${title} : "${key}"`);
      } else {
        search.value.keyword = search.value.keyword + ` && ${title} : "${key}"`;
      }
    } else {
      search.value.keyword += ` && ${title} : "${key}"`
    }
  }
}
onMounted(() => {
  search.value.keyword = keyword.value || ''
  getCountTop()
})
</script>

<template>
  <div class="jm-container flex-space jm-mainbox">
    <div class="left jm-bg-color">
      <div class="search-container jm-bg-color">
        <jm-collapse v-model="activeNames">
          <jm-collapse-item name="1">
            <template #title>
              <div class="header">国家统计TOP5</div>
            </template>
            <ListCard :list="country" :title="'country'" @concatValue="Click" />
            <!-- 地图 -->
            <MapChart @addCountry="selectMap" @removeCountry="cancelMap" class="chart-content"
              :MapList="country" />
            <!-- <MapChart class="chart-content" /> -->
          </jm-collapse-item>
        </jm-collapse>
      </div>
    </div>
    <div class="right jm-bg-color">
      <div class="list">
        <!-- 搜索 -->
        <div class="search flex jm-bg-color">
          <TipsSearchInput ref="search" class="tips-search" :active="active" @keyup.enter="handSearch"/>
          <jm-button type="primary" :icon="Search" @click="handSearch">搜索</jm-button>
          <jm-button type="primary" :icon="Search" @click="operateRef.show()">搜索语法</jm-button>
        </div>
        <!-- 结果 -->
        <div class="list-length">共为你找到 {{ page.total }} 条相关结果</div>
        <jm-divider />
        <div class="list-con" v-for="(item, index) in table.records" :key="item.id">
          <SearchCard :info="item" />
          <jm-divider v-if="index + 1 < table.records.length" />
        </div>
        <!-- 分页 -->
        <jmp-pagination v-model:page="page.pageNum" v-model:limit="page.pageSize" v-model:total="page.total" />
      </div>
    </div>
    <operateDrawer ref="operateRef" />
  </div>
</template>

<style scoped lang="scss">
.flex-space {
  display: flex;
  justify-content: space-between;
}

.left {
  width: 20%;
  margin-right: 1.25rem;

  .search-container {
    padding: 0.625rem;

    .chart-content {
      width: 100%;
      height: 12.5rem;
    }
  }
}

.right {
  flex: 1;
  padding: 1.875rem;

  .search {
    .tips-search {
      flex: 1;
      margin-right: 0.625rem;
      background: rgb(255 255 255 / 15%);
      border: 1px solid #ffffff;
    }
  }

  .list {
    .list-length {
      margin-top: 1.25rem;
      color: var(--el-color-info);
    }
  }
}
</style>
